<template>
  <h1 class="title">我的上月绩效考核结果</h1>
  <el-descriptions
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
    "
    :column="2"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          岗位名称
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
  </el-descriptions>
  
      <el-table
        :data="wageList"
        border
        style="width: 90%; margin: 0px auto;border-radius: 0px; margin: 0px auto;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
        :header-cell-style="{
            'background': '#337ecc !important',
            'color': '#ffffff',
            'border': 'none !important'
          }"
		  :span-method="(value) => rowSpanRulesHandler(value, wageList)">
      	<el-table-column prop="position" label="岗位" width=""></el-table-column>
		<el-table-column prop="basicWage" label="基本工资" width=""></el-table-column>
		<el-table-column prop="scoreWage" label="评分结算" width=""></el-table-column>
		<el-table-column prop="pieceWage" label="计件结算" width=""></el-table-column>
		<el-table-column prop="kpiWage" label="提成结算" width=""></el-table-column>
		<el-table-column prop="okrWage" label="okr结算" width=""></el-table-column>
		<el-table-column prop="rewardWage" label="特殊绩效" width=""></el-table-column>
		<el-table-column prop="partTimeRewardWage" label="兼职绩效" width=""></el-table-column>
		<el-table-column prop="total" label="总计" width=""></el-table-column>
      </el-table>
  
  
  
 
  <el-card style="padding: 10px" class="card">
    <template #header>
      <div class="card-header">
        <span>我的评分项目</span>
        <el-icon><Connection /></el-icon>
      </div>
    </template>
    <ScoreForm
      :scoreList="scoreList"
	  :scoreTotalList="scoreTotalList"
      v-if="WaitStateList.scoreState == 1"
    ></ScoreForm>
  </el-card>
  <el-card style="padding: 10px">
    <template #header>
      <div class="card-header">
        <span>我的计件项目</span>
        <el-icon><MessageBox /></el-icon>
      </div>
    </template>
    <PieceForm
      :pieceList="pieceList"
      v-if="WaitStateList.pieceState == 1"
    ></PieceForm>
  </el-card>
  <el-card style="padding: 10px">
    <template #header>
      <div class="card-header">
        <span>我的提成项目</span>
        <el-icon><DataLine /></el-icon>
      </div>
    </template>
    <KpiForm :kpiList="kpiList" v-if="WaitStateList.kpiState == 1"></KpiForm>
  </el-card>
  <el-card style="padding: 10px">
    <template #header>
      <div class="card-header">
        <span>我的Okr项目</span>
        <el-icon><Finished /></el-icon>
      </div>
    </template>
    <OkrForm :okrList="okrList" v-if="WaitStateList.okrState == 1"></OkrForm>
  </el-card>
  
  <el-card style="padding: 10px" class="card">
     <template #header>
       <div class="card-header">
         <span>我的特殊绩效</span>
         <el-icon><Connection/></el-icon>
       </div>
     </template>
     <RewardForm
       :rewardList="rewardList"
       v-if="WaitStateList.rewardState == 1"
     ></RewardForm>
   </el-card>
   
   
   <el-card style="padding: 10px" class="card">
      <template #header>
        <div class="card-header">
          <span>我的兼职绩效</span>
          <el-icon><Connection/></el-icon>
        </div>
      </template>
      <PartTimeRewardForm
        :partTimeRewardList="partTimeRewardList"
        v-if="WaitStateList.partTimeRewardState == 1"
      ></PartTimeRewardForm>
    </el-card>
  
  <!-- <el-card style="padding: 10px">
    <template #header>
      <div class="card-header">
        <span>我的特殊绩效项目</span>
        <el-icon><Finished /></el-icon>
      </div>
    </template>
    <OkrForm :okrList="okrList" v-if="WaitStateList.okrState == 1"></OkrForm>
  </el-card> -->

  <el-pagination
    class="pagination"
    background
    layout="prev, pager, next"
    :total="PageForm.total"
    :page-size="1"
    @current-change="handleCurrentChange"
  />
</template>

<script  setup>
import { ref, onBeforeMount, reactive, getCurrentInstance, watch } from "vue";
import { useRoute } from "vue-router";
import { Timer } from "@element-plus/icons-vue";
import { Calendar } from "@element-plus/icons-vue";
import ScoreForm from "./components/scoreForm";
import PieceForm from "./components/pieceForm";
import KpiForm from "./components/kpiForm";
import OkrForm from "./components/okrForm";
import RewardForm from "./components/rewardForm";
import PartTimeRewardForm from "./components/partTimeRewardForm";
import { getPerformance, state ,getMyWage } from "@/api/person";
import { ElMessage, ElMessageBox } from "element-plus";
import { point, match } from "@/api/empCheckState";

const now = new Date();
const year = now.getFullYear();
// 获取当前月份（注意：月份从0开始，所以需要加1）
const month = now.getMonth()+1;
// 格式化为 YYYY-MM 形式
const yearMonth = `${year}-${month < 10 ? '0' : ''}${month}`;

var value2 = ref(yearMonth);



const route = useRoute();
const deptName = ref();
const position = ref();

const PageForm = ref({
  page: 1,
  total: null,
});

const WaitStateList = ref([]);
const scoreList = ref([]);
const scoreTotalList = ref([]);
const pieceList = ref([]);
const kpiList = ref([]);
const okrList = ref([]);
const rewardList = ref([]);
const partTimeRewardList = ref([]);
const assessorPage = ref([]);
onBeforeMount(() => {
  let empId = JSON.parse(localStorage.getItem("userInfo")).id;
  
  state({ empId }).then((data) => {
    if (data.data) {
      match({ empId }).then((data) => {
        if (data.data) {
          view();
		  wage();
		  point({ empId });
        } else {
          open();
        }
      });
    }
    else{
      ElMessageBox.alert('您的本月绩效考核未审核完成，请稍后', '提示', {
    confirmButtonText: '返回',
    callback: (action) => {
      ElMessage({
        type: 'info',
        message: "返回",
      });
      goback();
    },
  });
    }
  });
});

const open = () => {
  let empId = JSON.parse(localStorage.getItem("userInfo")).id;

  ElMessageBox.confirm("是否查看您本月的绩效考核结果？", "Success", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "success",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "您已确认本月的绩效考核结果",
      });
      view();
	  wage();
      point({ empId });
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "您未确认本月的绩效考核结果",
      });
      goback();
    });
};

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const view = () => {
  let empId = JSON.parse(localStorage.getItem("userInfo")).id;
  var time = value2.value
  getPerformance({ empId ,time }).then((data) => {
    assessorPage.value = data.data.records;
    PageForm.value.total = data.data.total[0];
    WaitStateList.value = data.data.records[PageForm.value.page - 1].state[0];
	partTimeRewardList.value = data.data.records[PageForm.value.page - 1].partTimeReward;
	rewardList.value = data.data.records[PageForm.value.page - 1].reward;
    scoreList.value = data.data.records[PageForm.value.page - 1].score;
	scoreTotalList.value = data.data.records[PageForm.value.page - 1].scoreTotal;
    pieceList.value = data.data.records[PageForm.value.page - 1].piece;
    kpiList.value = data.data.records[PageForm.value.page - 1].kpi;
    okrList.value = data.data.records[PageForm.value.page - 1].okr;
    deptName.value =
      data.data.records[PageForm.value.page - 1].person[0].deptName;
    position.value =
      data.data.records[PageForm.value.page - 1].person[0].position;
  });
};

var wageList 
const wage = ()=>{
	var time = value2.value
	
	let empId = JSON.parse(localStorage.getItem("userInfo")).id;
	getMyWage({ empId ,time}).then((data) => {
	 wageList = data.data
	});
}


const handleCurrentChange = (value) => {
  WaitStateList.value = assessorPage.value[value - 1].state[0];
  rewardList.value = assessorPage.value[value - 1].reward;
  partTimeRewardList.value = assessorPage.value[value - 1].partTimeReward;
  scoreList.value = assessorPage.value[value - 1].score;
  scoreTotalList.value = assessorPage.value[value - 1].scoreTotal;
  pieceList.value = assessorPage.value[value - 1].piece;
  kpiList.value = assessorPage.value[value - 1].kpi;
  okrList.value = assessorPage.value[value - 1].okr;
  deptName.value = assessorPage.value[value - 1].person[0].deptName;
  position.value = assessorPage.value[value - 1].person[0].position;
};




const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
    let count = 0;
    let start = index;
  
    while (start < tableData.length) {
    	
    		
    		// 进入循环，检查下一个元素
    		if (start > index && row[compareAttr] !== tableData[start][compareAttr]) {
    			break;  // 如果不相等，则停止合并
    		}
    		count++;  // 计数相同的行
    		start++;  // 移动到下一行
    	
    	
    }
  
    // 将合并的行数存储在行数据中
    if (start > index) {
      tableData[index][`${compareAttr}_count`] = count;
    }
  
    // 检查前一行的合并数量与当前行是否相等
    const previousRowCount = index > 0 ? tableData[index - 1][`${compareAttr}_count`] : 0;
    return previousRowCount === count + 1 ? [0, 0] : [count, 1];
};

const columns = [
  "position",
  "basicWage",
  "scoreWage",
  "pieceWage",
  "kpiWage",
  "okrWage",
  "rewardWage",
  "partTimeRewardWage",
  "total"
];
const rowSpanRulesHandler = ({  row, column, rowIndex, columnIndex }, data) => {
  //console.log(columns[columnIndex]);
 // 根据列名判断进行合并
   if (columns[columnIndex] === "basicWage") {
     return compareSingleAttrReturnColSpan(row, "basicWage", rowIndex, data);
   } 
};
</script>
<style lang="scss" scoped>
.el-card {
  border-radius: 10px;
  margin: 20px auto;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.button {
  margin-left: 205px;
  float: left;
}

.header-tab:deep(.el-tabs__content) {
  flex-grow: 1;
  overflow-y: scroll;
}
.fixed-tabs {
  position: sticky;
  top: 0; /* 选项卡固定在顶部 */
  z-index: 1000; /* 确保选项卡在内容之上 */
}

:deep(.my-label) {
  background: rgba(98, 106, 239, 0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(98, 106, 239, 0.9) !important;
  border: #626aef 2px solid !important ;
}
.title {
  font-size: 1.5625rem;
  letter-spacing: 0.1875rem;
  padding: 0 0 1rem;
  margin-bottom: 16px;
  text-align: center;
  color: #626aef;
}
.el-card {
  width: 90%;
}

.el-card ::v-deep .el-card__header {
  border: none;
  height: 20px;
  color: #95d475;
  font-size: 20px;
}

.pagination {
  margin: 20px 50px;
  display: flex;
  justify-content: end;
}
</style>
